import React, { memo } from "react";
import sty from "./sty.module.css";
import { Button, message } from "antd";
import LoginIcon from "../loginIcon";
import { PhoneOutlined } from "@ant-design/icons";
const DefaultLogin = memo((props) => {
  const { handleLogin } = props;
  return (
    <div className="flex4">
      <div className={sty.left}>
        <div className="loginBg"></div>
        <Button
          className={sty.gap}
          type="ghost"
          shape="round"
          onClick={() => handleLogin("register")}
          icon={<PhoneOutlined />}
        >
          注册
        </Button>
        <Button
          type="primary"
          shape="round"
          onClick={() => handleLogin("phone")}
          icon={<PhoneOutlined />}
        >
          手机号登录
        </Button>
      </div>
      <div className={sty.right}>
        <LoginIcon
          handleClick={() => message.warn("暂不做")}
          position="-150px -670px"
          desc="微信登录"
        />
        <LoginIcon
          handleClick={() => message.warn("暂不做")}
          position="-190px -670px"
          desc="QQ登录"
        />
        <LoginIcon
          handleClick={() => message.warn("暂不做")}
          position="-231px -670px"
          desc="微博登录"
        />
        <LoginIcon
          handleClick={() => handleLogin("email")}
          position="-271px -670px"
          desc="网易邮箱登录"
        />
      </div>
    </div>
  );
});
export default DefaultLogin;
